<!-- 表单属性组件 -->
<template>
    <div class="form-config-container">
        <el-form label-position="left">
<!--                  <el-form-item label="标签对齐方式"  class="custom_input">-->
<!--                    <el-radio-group v-model="data.labelPosition">-->
<!--                      <el-radio-button label="left">左对齐</el-radio-button>-->
<!--                      <el-radio-button label="right">右对齐</el-radio-button>-->
<!--                      <el-radio-button label="top">顶部对齐</el-radio-button>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->

            <el-form-item label="宽度">
                <el-input class="custom_input" v-model="data.labelWidth"></el-input>
            </el-form-item>

            <!--      <el-form-item label="组件尺寸">-->
            <!--        <el-radio-group v-model="data.size">-->
            <!--          <el-radio-button label="medium">medium</el-radio-button>-->
            <!--          <el-radio-button label="small">small</el-radio-button>-->
            <!--          <el-radio-button label="mini">mini</el-radio-button>-->
            <!--        </el-radio-group>-->
            <!--      </el-form-item>-->


            <el-form-item label="表单名称">
                <el-input class="custom_input" v-model="data.formName"></el-input>

            </el-form-item>
            <el-form-item label="表单序列号">
                <el-input class="custom_input" v-model="data.formNumber" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="自定义样式">
                <el-input class="custom_input" type="textarea" :rows="2"
                          v-model="data.customStyle"></el-input>
            </el-form-item>
            <el-form-item label="自定义Class" >
                <el-input class="custom_input" v-model="data.customClass" clearable></el-input>
            </el-form-item>
            <el-form-item label="JS增强" >
                <el-tooltip class="item" effect="dark" placement="top-start">
                    <div slot="content">在JS增强输入框里除了可以用挂载到window中的全局变量之外，
                        <br/>还可以用我们给你封装好的几个变量以及方法，
                        <br/> 他们分别如下
                        <br/>  vm Vue实例，可以调用Vue的一系列的方法，例如 vm.$nextTick();
                        <br/>api 封装了一下api，具体如下
                        <br/> api.getFormData(key)
                        <br/>setFormData(key, value) 设置form表单的值 show(key) 显示一个或多个组件
                        <br/>hide(key) 隐藏一个或多个组件 api.validate()校验表单
                        <br/>api.resetFields() 重置表单
                    </div>

                    <el-input class="custom_input" v-model="data.jsExpand" type="textarea" :rows="6" clearable></el-input>
                </el-tooltip>



            </el-form-item>

            <el-form-item label="外部js资源">
                <el-input class="custom_input"  type="textarea" :rows="6"
                          v-model="data.customJs"></el-input>
            </el-form-item>

            <el-form-item label="是否查看">
                <el-checkbox v-model="data.disable" @change="changeDisable"></el-checkbox>
            </el-form-item>
            <el-form-item label="显示批注">
                <el-checkbox v-model="data.showAnnotation" @change="changeShowAnnotation"></el-checkbox>
            </el-form-item>


            <el-form-item label="布局" label-width="50px">
                <el-col :span="30">
                    <el-radio-group v-model="radio1" @change="layOutChange($event)">
                        <el-radio-button label="24">单列</el-radio-button>
                        <el-radio-button label="12">两列</el-radio-button>
                        <el-radio-button label="8">三列</el-radio-button>
                        <el-radio-button label="6">四列</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-form-item>


        </el-form>
    </div>
</template>

<script>
    import MakingForm from './Container.vue'


    export default {
        props: ['data','form'],  // 父组件传递的data
        components: {
            MakingForm
        },
        mounted() {

        },

        data() {
            return {
                radio1: 12
            };
        },
        methods: {
            getA() {
            },
            changeDisable(disabled) {
                this.changeDisableFun(disabled);
            },
            changeShowAnnotation(disabled) {
                this.changeShowAnnotationFun(disabled);
            },
            changeDisableFun:function(val){
               var list=  this.form.list;
                this.changeDisableAction(list,val);

            },
            changeShowAnnotationFun:function(val){
               var list=  this.form.list;
                this.changeShowAnnotationAction(list,val);

            },
            changeShowAnnotationAction:function(list,val){
                list.forEach(item =>{
                    if (item.options) {
                        item.options.showAnnotation=val;
                    }else{
                        list=item
                        this.changeDisableAction(list,val)
                    }

                    if (item.tabColumns){
                        list=item.tabColumns
                        this.changeShowAnnotationAction(list,val)
                    }
                    if (item.tableColumns){
                        list=item.tableColumns
                        this.changeShowAnnotationAction(list,val)
                    }
                })
            },
            changeDisableAction:function(list,val){
                list.forEach(item =>{
                    if (item.options) {
                        item.options.disabled=val;
                    }else{
                        list=item
                        this.changeDisableAction(list,val)
                    }

                    if (item.tabColumns){
                        list=item.tabColumns
                        this.changeDisableAction(list,val)
                    }
                    if (item.tableColumns){
                        list=item.tableColumns
                        this.changeDisableAction(list,val)
                    }
                })
            },
            layOutChange: function (val) {

                this.$emit('getjson', val);
            },
            childMethod() {


            }
        },
        watch: {
            data() {
                this.$nextTick(_ => {
                })
            },
            disable(val, oldVal) {
            },
        }
    }
</script>
<style type="text/css">
    .custom_input {
        width: auto !important;
    }
</style>